<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>插入DOM</title>
</head>
<body>
	<p id="js">JavaScript</p>
	<div id="list">
		<p id="java">Java</p>
		<p id="python">Python</p>
		<p id="schema">Schema</p>
	</div>
<script>
	//插入DOM
	//1:如果dom节点是空的innerHTML = '<span>child</span>' 就可以实现
	//2:如果dom节点非空，则不能用innerHTML,因为会被覆盖，想要添加子节点
	//可以使用appendChild

	//将JavaScript 放置 Schema 后面
	let
		js = document.getElementById("js"),
		list = document.getElementById("list");
	//因为js DOM节点已经存在于当前的文档树，会先删除，后插入
	list.appendChild(js);

	//3:从0创建一个新的DOM节点,然后插入
	let haskell = document.createElement("p");
	//设置DOM节点属性
	haskell.id = "haskell";
	haskell.innerText = "Haskell";
	list.appendChild(haskell);

	//4:也可以动态的创建一个style然后添加一些属性
	let style = document.createElement("style");
	//设置属性
	style.setAttribute("type","text/css");
	style.innerHTML = "p { color:red }";
	//往head里添加DOM节点
	document.getElementsByTagName("head")[0].appendChild(style);

	//5:在指定的位置插入DOM节点，使用insertBefore,来插入节点
	let
		p2 = document.createElement("p"),
		p3 = document.getElementById("Python");
	p2.id = "c++";
	p2.innerHTML = "c++";
	list.insertBefore(p2,p3);
</script>
</body>
</html>